<template>
    <div class="bottom">
        <!-- 头部信息 -->
        <div class="travetitle">出行人
            <el-button type="primary" plain @click="dialogVisible = true">添加用户</el-button>
        <!--添加用户对话框-->
        <el-dialog
        title="提示"
        v-model="dialogVisible"
        @close="addDialogClosed"
        width="50%">
        <!--主体信息-->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
            </el-form>
        <!-- 底部信息 -->
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="dialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="adduser">确 定</el-button>
            </span>
        </template>
        </el-dialog>
        <!-- 修改用户对话框 -->
        <el-dialog
        title="修改用户"
        v-model="eidtDialogVisible"
        width="50%">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
            </el-form>
        
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="eidtDialogVisible= false">取 消</el-button>
            <el-button type="primary" @click="eidtDialogVisible= false">确 定</el-button>
            </span>
        </template>
        </el-dialog>
        </div>
        <el-divider></el-divider>
    <!--表格-->
        <el-table :data="userlist" stripe border style="width: 100%" :row-style="{height: '40px'}" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="username" label="用户名" width="100"></el-table-column>
            <el-table-column prop="phone" label="电话" width="80"></el-table-column>
            <el-table-column prop="email" label="邮箱" width="220"></el-table-column>
            <el-table-column label="操作">
                <el-button class="editbtn" @click="eidtDialog" size="mini">编辑</el-button>
               <el-button class="editbtn" @click="eidtDialog" size="mini">删除</el-button>
            </el-table-column>
        </el-table> 
    </div>
</template>

<script>
 export default {
  data () {
   return {
    multipleSelection: [],
    dialogVisible:false,
    eidtDialogVisible:false,
    //常用出行人列表
    userlist: [{
          username: '2016-05-02',
          phone: '王小虎',
          email: '上海市普陀区金沙江路 1518 弄'
        },],
    //添加常用出行人
    addForm:{username:'',
            password:'',
            email:'',
            phone:'',
            },
    //常用出行人条件判断
    addFormRules:{
      username:[{
            required:true,message:"请输入姓名",trigger:'blur'},{min:3,max:10,message:"用户名的长度在3~10",trigger:'blur'}],
      password:[{
            required:true,message:"请输入密码",trigger:'blur'},{min:3,max:10,message:"密码的长度在3~10",trigger:'blur'}],
      email:[{
            required:true,message:"请输入密码",trigger:'blur'},{min:3,max:10,message:"密码的长度在3~10",trigger:'blur'}],
      phone:[{
            required:true,message:"请输入密码",trigger:'blur'},{min:3,max:10,message:"密码的长度在3~10",trigger:'blur'}],
    }
   };
  },
  methods: {
    //展示编辑用户对话框
    eidtDialog(){
      this.eidtDialogVisible=true
    },
    //重置表单
    addDialogClosed(){
      this.$refs.addFormRef.resetFields()
    },
    // 添加用户
    adduser(){
      this.$refs.addFormRef.validate(valid=>{
        //验证失败
        if(!valid) return
        //添加用户 
        console.log(valid)
      })
    },
    toggleSelection(rows) {
        if (rows) {
            rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        }else {
            this.$refs.multipleTable.clearSelection();}
      },
    handleSelectionChange(val) {
       this.multipleSelection = val;}
 },
 }
</script>
<style lang='scss' scoped>
.travetitle{
  height: 20px;
  line-height:30px;
  text-align: left;
  padding-left: 20px;
  font-size:20px;
  color:rgb(90,165,240);
}  
.el-button{
  margin-left:430px;
}
.bottom{
    margin-top: 20px;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.editbtn{
    margin-right: 5px;
    margin-left: 15px;
}
</style>